<template>
    <van-nav-bar title="资金流水" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="Capital">
        <div class="Capital_center">
            <div class="Capital_wallet">
                <div class="wallet">
                    <div class="int">
                        <p> 解冻积分 </p>
                        <h5> {{ MemberExt.Wallet3 || 0 }} </h5>
                    </div>
                    <div class="int">
                        <div class="btn" @click="goWithdrawal(1)"> 提现 </div>
                    </div>
                </div>
                <div class="wallet">
                    <div class="int">
                        <p> 团队积分 </p>
                        <h5> {{ MemberExt.Wallet4 || 0 }} </h5>
                    </div>
                    <div class="int">
                        <div class="btn" @click="goWithdrawal(2)"> 提现 </div>
                    </div>
                </div>
            </div>
            <div class="Commodity_nav" style="width: 90%;position: absolute;top:196px;left: 5%;">
                <div class="list">
                    <div :key="index" v-for="(Item, index) in businessList"
                        :class="['int', Item.value == businessValue ? 'active' : '']"   @click="businesssFan(Item.value)">
                        {{ Item.label }} </div>
                </div>
                <div class="list">
                    <div :key="index" v-for="(Item, index) in walletModelList"
                        :class="['int', Item.value == walletModelValue ? 'active' : '']" @click="walletModelFan(Item.value)">
                        {{ Item.label }} </div>
                </div>
            </div>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="WalletChangeLogList.length > 0 ? '已经到底了哦' : ''"
            @load="onLoad">
            <div class="Capital_List">
                <div class="list" v-if="WalletChangeLogList.length > 0">
                    <div class="int" :key="index" v-for="(Item, index) in WalletChangeLogList">
                        <div class="dist">
                            <span> {{ Item.OccurTime }} </span>
                            <p> {{ Item.BusinessText }} </p>
                        </div>
                        <div class="dist">
                            <span> {{ Item.Remark }} </span>
                            <h5 :class="[Item.TargetValue > 0 ? 'income' : 'expenditure']"> {{ Item.TargetValue }} </h5>
                        </div>
                    </div>
                </div>
                <div class="vanEmpty" v-else>
                    <van-empty image-size="100px" description="暂无数据" />
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import { useRoute, useRouter } from "vue-router";
import { GetWalletChangeLogList } from "@/network/Capital";
import { GetMemberExt } from "@/network/user";
import router from "@/router";
import {
    getToken,
    setToken,
    removeToken
} from "@/utils/auth";
export default {
    setup() {
        const store = useStore(); // 获取对象
        const state = reactive({
            token: store.state.user.token,
            indexofapp: store.state.user.indexofapp,
            isLoading: false,
            loading: false,
            finished: false,
            pageSize: 6,
            currentPage: 1,
            Total: 0,
            WalletChangeLogList: [],
            businessValue: 0,
            businessList: [
                {
                    label: '全部',
                    value: 0
                },
                {
                    label: '订单',
                    value: 1
                },
                {
                    label: '充值',
                    value: 2
                },
                {
                    label: '提现',
                    value: 3
                }
            ],
            walletModelValue: 0,
            walletModelList: [
                {
                    label: '全部',
                    value: 0
                },
                {
                    label: '消费积分',
                    value: 1
                },
                {
                    label: '解冻积分',
                    value: 3
                },
                {
                    label: '团队积分',
                    value: 4
                }
            ],
            MemberExt: {},
        });
        onMounted(() => {
            init();
            init_MemberExt();
        });
        const onLoad = () => {
            if (state.WalletChangeLogList.length == state.Total) {
                if (state.WalletChangeLogList.length != 0) {
                    state.loading = false
                    state.finished = true
                }
            } else {
                state.currentPage = parseInt(state.currentPage) + 1;
                init();
            }
        }
        const walletModelFan = (value) => {
            state.walletModelValue = value;
            state.currentPage = 1;
            state.WalletChangeLogList = [];
            state.finished = false
            init();
        };
        
        const businesssFan = (value) => {
            state.businessValue = value;
            state.currentPage = 1;
            state.WalletChangeLogList = [];
            state.finished = false
            init();
        };
        // 初始化信息
        const init = () => {
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '信息获取中...',
            });
            var params = {
                memberId: state.token.ID,
                business: state.businessValue,
                walletModel: state.walletModelValue,
                pageSize: state.pageSize,
                currentPage: state.currentPage
            }
            // 获取列表
            GetWalletChangeLogList(params).then((res) => {
                toast.clear()
                if (res.Code == 0) {
                    var data = res.Data;
                    state.Total = res.Pager.Total
                    if (data.length > 0) {
                        data.forEach(element => {
                            state.WalletChangeLogList.push(element)
                        });
                    } else {
                        state.finished = true
                    }
                } else { }
            });
        };
        const init_MemberExt = () => {
            // 获取扩展信息
            GetMemberExt({
                Id: state.token.ID
            }).then((res) => {
                if (res.Code == 0) {
                    var data = res.Data;
                    state.MemberExt = data
                }
            });
        }
        const goWithdrawal = (type) => {
            router.push({
                path: "/withdrawal",
                query: {
                    type: type,
                    date: new Date().getTime()
                }
            });
        }
        const onRefresh = () => {
            init()
            state.isLoading = false
        }
        const onClickLeft = () => {
            router.push({ path: "/my" });
        };
        return {
            ...toRefs(state),
            onLoad,
            init_MemberExt,
            goWithdrawal,
            businesssFan,
            walletModelFan,
            onRefresh,
            onClickLeft
        };
    },
};
</script>

<style scoped></style>